<template>
  <div class="back-wrap">
    <div class="title">{{title}}</div>
    <div class="iconfont icon"
         @click="handleBack">&#xe620;</div>
  </div>
</template>

<script>
export default {
  name: 'ComponentBack',
  props: {
    title: {
      type: String,
      default: '返回'
    }
  },
  methods: {
    handleBack () {
      this.$router.back()
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.back-wrap
  position absolute
  z-index 5
  top 0
  left 0
  width 100%
  height 88px
  text-align center
  line-height 88px
  background $common_bgc
  box-shadow 0px 5px 12px 0px rgba(5, 5, 5, 0.12)
  font-size $back_fz
  color common_fz_color
  font-weight bold

  .icon
    position absolute
    top 0
    left 0
    height 100%
    width 72px
    text-align center
    line-height 88px
    font-size $back_fz
    font-weight normal
</style>
